<template>
  <div class="login">
    <div class="left">
      <img src="https://cdn.web-global.fds.api.mi-img.com/mcfe--mi-account/static/static/media/banner.5b1efcd8.jpg" alt="">
    </div>
    <div class="right">
      <div class="top">
        <img src="/imgs/mi-logo.png" alt="" class="logo">
        <h6 class="title">小米账号</h6>
        <div class="layout">
          <ul>
            <li>
              <a href="#">用户协议</a>
            </li>
            <li>
              <a href="#">隐私政策</a>
            </li>
            <li>
              <a href="#">帮助中心</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="bottom">
        <div class="login-box">
          <div class="user">
            <a href="#" class="active">登入</a>
            <a href="#">注册</a>
          </div>
          <div class="id">
            <div>
              <input type="text" placeholder="请输入用户" v-model.trim="username" @blur="userInfoVer('username')">
              <img src="imgs/success.png" alt="" v-if="showUserNameSuccess">
              <img src="imgs/close.png" alt="" v-else>
            </div>
            <div><input type="password" placeholder="请输入密码" v-model.trim="password" @blur="userInfoVer('password')">
              <img src="imgs/success.png" alt="" v-if="showPasswrodSuccess">
              <img src="imgs/close.png" alt="" v-else>
            </div>
          </div>
          <div class="checked">
            <input type="checkbox" checked>
            <span>已阅读并同意小米帐号 用户协议 和 隐私政策</span>
          </div>
          <div class="gologin">
            <a href="#" @click="login">登入</a>
          </div>
          <div class="forger">
            <a href="#">忘记密码？</a>
            <a href="#">手机号登入</a>
          </div>
          <div class="orther">
            <p>其他登入方式</p>
            <div class="icon">
              <a href="#">
                <svg t="1648822537725" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2217" width="40" height="40">
                  <path d="M230.771014 576.556522c-12.614493 9.646377-25.228986 23.744928-28.93913 42.295652-5.194203 24.486957-0.742029 55.652174 22.26087 80.13913 28.93913 28.93913 72.718841 37.101449 92.011594 38.585508 51.2 3.710145 106.110145-22.26087 147.663768-50.457971 16.324638-11.130435 43.77971-34.133333 70.492754-69.750725-59.362319-30.423188-133.565217-64.556522-212.22029-61.588406-41.553623 1.484058-70.492754 9.646377-91.269566 20.776812zM983.188406 712.347826c25.971014-61.588406 40.811594-129.113043 40.811594-200.347826 0-281.971014-230.028986-512-512-512S0 230.028986 0 512s230.028986 512 512 512c170.666667 0 321.298551-83.849275 414.794203-212.22029C838.492754 768.742029 693.797101 696.023188 604.011594 652.985507c-42.295652 48.973913-105.368116 97.205797-176.602898 117.982609-44.521739 13.356522-85.333333 18.550725-126.886957 9.646377-42.295652-8.904348-72.718841-28.197101-90.527536-47.489855-8.904348-10.388406-19.292754-22.26087-27.455073-37.843479 0.742029 0.742029 0.742029 2.226087 0.742029 2.968116 0 0-4.452174-7.42029-7.420289-19.292753-1.484058-5.936232-2.968116-11.872464-3.710145-17.808696-0.742029-4.452174-0.742029-8.904348 0-12.614493-0.742029-7.42029 0-15.582609 1.484058-23.744927 4.452174-20.776812 12.614493-43.77971 35.617391-65.298551 48.973913-48.231884 115.014493-50.457971 149.147826-50.457971 50.457971 0.742029 138.017391 22.26087 212.22029 48.973913 20.776812-43.77971 34.133333-89.785507 42.295652-121.692754H304.973913v-33.391304h158.052174v-66.782609H272.324638v-34.133333h190.701449v-66.782609c0-8.904348 2.226087-16.324638 16.324638-16.324637h74.944927v83.107246h207.026087v33.391304H554.295652v66.782609H719.768116S702.701449 494.933333 651.501449 586.202899c115.014493 40.811594 277.518841 104.626087 331.686957 126.144927z m0 0" fill="#06B4FD" p-id="2218"></path>
                </svg>
              </a>
              <a href="#">
                <svg t="1648822632443" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3622" width="40" height="40">
                  <path d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z" fill="#28C445" p-id="3623"></path>
                  <path d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z" fill="#28C445" p-id="3624"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import storage from '@/Storage'
export default {
  name: 'login',
  data() {
    return {
      username: '',
      password: '',
      showUserNameSuccess: '',
      showPasswrodSuccess: ''
    }
  },
  methods: {
    async login() {
      console.log(this.$route.query)
      if (this.isLogin) {
        try {
          const res = await this.$store.dispatch('login', { username: this.username, password: this.password })
          if (res) {
            this.$store.dispatch('getShopCat')
            this.$store.dispatch('getOrderList')
            this.$route.query.history ? this.$router.push(`${this.$route.query.history}`) : this.$router.push('/')
          }
        } catch (error) {
          alert(error.message)
        }
      } else {
        this.$message({
          message: '请先输入用户名和密码',
          type: 'warning'
        })
      }
    },
    // 账号和密码的验证
    userInfoVer(userInfo) {
      const { username, password } = this
      if (userInfo === 'username') {
        const userZZ = /[a-zA-Z0-9_]{3,16}/
        const flag = userZZ.test(username)
        if (flag) {
          this.showUserNameSuccess = true
        } else {
          this.$message({
            message: '用户名格式6-12位',
            type: 'warning'
          })
          this.showUserNameSuccess = false
          this.username = ''
        }
      } else {
        const passwordZZ = /^[a-zA-Z]\w{6,16}$/
        const flag = passwordZZ.test(password)
        console.log(flag)
        if (flag) {
          this.showPasswrodSuccess = true
        } else {
          this.$message({
            message: '密码格式6-16位，以字母开头',
            type: 'warning'
          })
          this.showPasswrodSuccess = false
          this.password = ''
        }
      }
    }
  },
  computed: {
    isLogin() {
      return Boolean(this.username) && Boolean(this.password)
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  background-color: rgb(246, 241, 241);
  .left {
    img {
      position: fixed;
      width: 375px;
    }
  }
  .right {
    padding: 0 0 0 375px;
    .top {
      padding: 30px 0 0 20px;
      width: 1128px;
      height: 40px;
      line-height: 40px;
      .logo {
        float: left;
        height: 100%;
        background-color: #ff6600;
      }
      .title {
        float: left;
        font-size: 30px;
        margin-left: 15px;
      }
      .layout {
        float: left;
        width: 300px;
        height: 100%;
        margin-left: 650px;
        ul li {
          float: left;
          margin-right: 30px;
          a {
            color: #333;
            font-size: 14px;
            &:hover {
              color: #ff6600;
            }
          }
        }
      }
    }
    .bottom {
      text-align: center;
      margin-right: 0;
      .login-box {
        display: inline-block;
        box-sizing: border-box;
        width: 450px;
        background-color: #fff;
        height: 615px;
        padding: 40px 45px;
        margin: 25px 0 15px 0;
        .user {
          height: 44px;
          line-height: 44px;
          text-align: left;
          font-size: 20px;
          a {
            color: rgb(137, 137, 137);
            font-weight: 600;
            margin-right: 20px;
            padding-bottom: 3px;
          }
        }
        .id {
          margin-top: 25px;
          div {
            position: relative;
            img {
              position: absolute;
              top: 15px;
              width: 30px;
              height: 30px;
              margin-left: 10px;
            }
          }
          input {
            width: 100%;
            height: 60px;
            background-color: rgb(229, 227, 227);
            border: 0;
            border-radius: 5px;
            margin-bottom: 18px;
            text-indent: 2em;
          }
        }
        .checked {
          width: 100%;
          height: 24px;
          line-height: 24px;
          text-align: left;
          input {
            vertical-align: middle;
            width: 20px;
            height: 20px;
            margin-right: 5px;
          }
          span {
            font-size: 14px;
          }
        }
        .gologin {
          width: 100%;
          height: 60px;
          text-align: center;
          line-height: 60px;
          margin: 25px 0 15px;
          a {
            display: block;
            width: 100%;
            height: 100%;
            background-color: #ff6600;
            border-radius: 10px;
            font-size: 20px;
            color: #fff;
          }
        }
        .forger {
          display: flex;
          justify-content: space-between;
          a {
            color: #ff6600;
            font-size: 16px;
          }
        }
        .orther {
          margin-top: 40px;
          color: #ccc;
          font-size: 16px;
          .icon {
            display: flex;
            justify-content: space-between;
            padding: 15px 30px;
          }
        }
      }
    }
  }
}
.active {
  color: #ff6600;
  border-bottom: 4px solid #ff6600;
}
</style>
